<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="root">
        <!-- 一般都需要配置一个key 这样就不能两个相同的id -->
       <button @click="updateMei">更新马冬梅</button>
        <ul>
            <li v-for="(p,index) in persons" :key="p.id">
                {{p.name}}--{{p.age}}---{{p.sex}}
            </li>
        </ul>



    </div>


    <script src="../vue.js"></script>

    <script>
        Vue.config.productionTip = false
        
        /* new Vue({
            el: "#root",
            data: {
                keyWord: '',
                persons: [
                    { id: '001', name: '马冬梅', age: '19', sex: '女' },
                    { id: '002', name: '周冬雨', age: '20', sex: '女' },
                    { id: '003', name: '周杰伦', age: '21', sex: '男' },
                    { id: '004', name: '温兆伦', age: '22', sex: '男' }
                ],
                filterpersons: []
            },
            watch: {
                keyWord: {
                    immediate: true,   //先执行一次  它本身就是空字符串 那么列表就全显示出来了
                    handler(val) {
                        this.filterpersons = this.persons.filter((p) => {
                            return p.name.indexOf(val) != -1   //是否包含val字符串
                        })
                    }
                }
            }

        }) */
        
        const vm=new Vue({
            el: "#root",
            data: {
                persons: [
                    { id: '001', name: '马冬梅', age: '30', sex: '女' },
                    { id: '002', name: '周冬雨', age: '31', sex: '女' },
                    { id: '003', name: '周杰伦', age: '18', sex: '男' },
                    { id: '004', name: '温兆伦', age: '19', sex: '男' }
                ],
            },
            methods: {
                updateMei() {
                    //this.persons[0].name='马老师';  //数组通过修改属性也可以
                    //this.persons[0]={ id: '001', name: '马老师', age: '30', sex: '男' }
                    this.persons.splice(0,1,{ id: '001', name: '马老师', age: '30', sex: '男' })  //这样写才可以 只能通过数组的方法来改变
                    //不过两个splice不是原型对象的splice了
                },
            },
          
        })
    </script>

</body>

</html>